<template>
    <div>
        <div ref="AskCourseChapterNumberChartRef" style="width: 1500px;height:400px;"></div>
    </div>
    <div>
        <div>
            <label for="startTime">起始时间:</label>
            <input type="datetime-local" id="startTime" v-model="startTimeChapter" />
        </div>
        <div>
            <label for="endTime">结束时间:</label>
            <input type="datetime-local" id="endTime" v-model="endTimeChapter" />
        </div>
        <button @click="UpdateChapterChart">show</button>
        <div ref="AskClassChapterNumberChartRef" style="width: 1500px;height:400px;"></div>
    </div>
    <div>
        <div>
            <label for="startTime">起始时间:</label>
            <input type="datetime-local" id="startTime" v-model="startTime" />
        </div>
        <div>
            <label for="endTime">结束时间:</label>
            <input type="datetime-local" id="endTime" v-model="endTime" />
        </div>
        <button @click="UpdateTimeChart">show</button>
        <div ref="AskClassTimeNumberChartRef" style="width: 1500px;height:400px;"></div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import { getAskChapterNumberService, getAskChapterNumberByTimeService,getAskTimeNumberByTimeService } from '@/api/teacherApi/getAskChapterNumber.js';

const startTimeChapter = ref('');
const endTimeChapter = ref('');
const startTime = ref('');
const endTime = ref('');
const AskCourseChapterNumberChartRef = ref(null);
const AskClassChapterNumberChartRef = ref(null);
const AskClassTimeNumberChartRef = ref(null);
let AskChapterNumberChartInstance = null;
let AskClassChapterNumberChartInstance = null;
let AskClassTimeNumberChartInstance = null;

// 假设 getAskChapterNumberService 返回的是一个对象，其中包含您需要的图表数据  
const getCourseChapterNumber = async () => {
    try {
        let result = await getAskChapterNumberService();
        // 假设 result.xAxisData 是 x 轴数据，result.seriesData 是折线数据  
        return {
            key: result.data.key, // 假设的 API 响应结构  
            value: result.data.value // 假设的 API 响应结构  
        };
    } catch (error) {
        console.error('获取数据失败:', error);
        // 可以选择抛出错误或返回默认值等  
        return {
            xAxisData: [],
            seriesData: []
        };
    }
};
const getClassChapterNumber = async (startTime, endTime) => {
    try {
        let result = await getAskChapterNumberByTimeService(startTime, endTime);
        // 假设 result.xAxisData 是 x 轴数据，result.seriesData 是折线数据  
        return {
            key: result.data.key, // 假设的 API 响应结构  
            value: result.data.value // 假设的 API 响应结构  
        };
    } catch (error) {
        console.error('获取数据失败:', error);
        // 可以选择抛出错误或返回默认值等  
        return {
            xAxisData: [],
            seriesData: []
        };
    }
};
const getClassTimeNumber = async (startTime, endTime) => {
    try {
        let result = await getAskTimeNumberByTimeService(startTime, endTime);
        // 假设 result.xAxisData 是 x 轴数据，result.seriesData 是折线数据  
        return {
            key: result.data.key, // 假设的 API 响应结构  
            value: result.data.value // 假设的 API 响应结构  
        };
    } catch (error) {
        console.error('获取数据失败:', error);
        // 可以选择抛出错误或返回默认值等  
        return {
            xAxisData: [],
            seriesData: []
        };
    }
};
const UpdateChapterChart = async () => {
    try {
        // 调用API获取数据，传入起始时间和结束时间  
        const result = await getClassChapterNumber(startTimeChapter.value, endTimeChapter.value);

        // 假设result包含了categories（类别数组）和values（数据数组）  
        const { categories, values } = result;

        // 更新图表的数据和配置项  
        if (AskClassChapterNumberChartInstance) {
            AskClassChapterNumberChartInstance.setOption({
                xAxis: {
                    data: result.key // 更新x轴数据  
                },
                series: [{
                    data: result.value // 更新系列数据  
                }]
            });
        } else {
            AskClassChapterNumberChartInstance = echarts.init(chartRef.value);
            initChart(categories, values);
        }
    } catch (error) {
        console.error('获取数据失败:', error);
    }

};
const UpdateTimeChart = async () => {
    try {
        // 调用API获取数据，传入起始时间和结束时间  
        const result = await getClassTimeNumber(startTime.value, endTime.value);

        // 假设result包含了categories（类别数组）和values（数据数组）  
        const { categories, values } = result;

        // 更新图表的数据和配置项  
        if (AskClassTimeNumberChartInstance) {
            AskClassTimeNumberChartInstance.setOption({
                xAxis: {
                    data: result.key // 更新x轴数据  
                },
                series: [{
                    data: result.value // 更新系列数据  
                }]
            });
        } else {
            AskClassTimeNumberChartInstance = echarts.init(chartRef.value);
            initChart(categories, values);
        }
    } catch (error) {
        console.error('获取数据失败:', error);
    }

};
// 初始化图表，现在接受数据作为参数  
const initChartCourseChapter = (data) => {
    if (AskCourseChapterNumberChartRef.value) {
        AskChapterNumberChartInstance = echarts.init(AskCourseChapterNumberChartRef.value);
        AskChapterNumberChartInstance.setOption({
            title: {
                text: '课程学生提问数量'
            },
            tooltip: {},
            xAxis: {
                data: data.key
            },
            yAxis: {},
            series: [{
                name: '章节',
                type: 'bar',
                data: data.value
            }]
        });
    }
};

const initChartClassChapter = () => {
    if (AskClassChapterNumberChartRef.value) {
        AskClassChapterNumberChartInstance = echarts.init(AskClassChapterNumberChartRef.value);
        AskClassChapterNumberChartInstance.setOption({
            title: {
                text: '课堂学生提问数量'
            },
            tooltip: {},
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '章节',
                type: 'bar',
                data: []
            }]
        });
    }
};

const initChartTime = () => {
    if (AskClassTimeNumberChartRef.value) {
        AskClassTimeNumberChartInstance = echarts.init(AskClassTimeNumberChartRef.value);
        AskClassTimeNumberChartInstance.setOption({
            title: {
                text: '学生时间提问数量'
            },
            tooltip: {},
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '日期',
                type: 'line',
                data: []
            }]
        });
    }
};

onMounted(async () => {
    const chartData = await getCourseChapterNumber(); // 等待数据加载  
    initChartCourseChapter(chartData); // 使用加载的数据初始化图表  
    initChartClassChapter()
    initChartTime()
});

onBeforeUnmount(() => {
    if (AskChapterNumberChartInstance) {
        AskChapterNumberChartInstance.dispose();
    }
    if (AskClassChapterNumberChartInstance) {
        AskClassChapterNumberChartInstance.dispose();
    }
    if (AskClassTimeNumberChartInstance) {
        AskClassTimeNumberChartInstance.dispose();
    }
});  
</script>

<style scoped>
/* 样式 */
</style>